import React from "react"
import styles from '@/assets/css/myCoupon.module.css'
import Menu from '@/views/common/menu'
import { sleep } from 'antd-mobile/es/utils/sleep'

export default () => {

    let [status, SetStatus] = useState('all')

    let [couponList, SetCouponList] = useState([])
    let [hasMore, SethasMore] = useState(false)
    let [page, SetPage] = useState(1)

    React.useEffect(() => {
        GetCounponList()
    }, [])

    const GetCounponList = async () => {
        let params = {
            active: status,
            busid: React.business.id,
            page
        }

        let result = await React.request.post('/business/Coupon', params)

        if(result.code == 0)
        {
            SethasMore(false)
            return false
        } else
        {
            SetCouponList(couponList.concat(result.data.list))
            SethasMore(true)
            SetPage(page + 1)
        }
    }

    const ChangeTab = async (key: string) => {
        SetStatus(key)
        OnRefresh()
    }

    // 下拉刷新
    const OnRefresh = async () => {
        SetPage(1)
        SethasMore(true)
        SetCouponList([])

        await sleep(800)
        GetCounponList()
    }

    const LoadMore = async () => {
        await sleep(800)
        await GetCounponList()
    }

    return (
        <>
            <div className={styles.header}>
                <React.UI.Tabs onChange={ChangeTab}>
                    <React.UI.Tabs.Tab key={'all'} title='全部'/>
                    <React.UI.Tabs.Tab key={'0'} title='已使用'/>
                    <React.UI.Tabs.Tab key={'1'} title='未使用'/>
                </React.UI.Tabs>
            </div>

            {/* 优惠劵列表 */}
            <div className={styles.couponList}>
                <React.UI.PullToRefresh style={{backgroundColor: '#f4f6f8'}} onRefresh={OnRefresh}>
                        {couponList.map((item: any) => (
                            <div className={styles.item} key={item.coupon.id}>
                                <Link className={styles.left} to={`/coupon/info?cid=${item.coupon.id}`}>
                                    <div className={styles.couponInfo}>
                                        <div className={styles.name}>{item.coupon.title}</div>
                                        <div className={styles.num}>共发放<span>{item.coupon.total}</span>张，每人限领<span>1</span>张</div>
                                        <div className={styles.time}>{item.coupon.createtime_text} - {item.coupon.endtime_text}</div>
                                    </div>
                                </Link>
                                <div className={styles.right}>
                                    <div className={styles.rate}>{(item.coupon.rate * 10).toFixed(1)}<span>折</span></div>
                                    {item.take_status ? <div className={styles.waterMark}>已使用</div> : <div className={styles.receiveBtn} onClick={() => React.navigate('/')}>立即使用</div> }
                                </div>
                            </div>
                        ))}

                    {/* 上拉加载 */}
                    <React.UI.InfiniteScroll loadMore={LoadMore} hasMore={hasMore} threshold={0} />
                </React.UI.PullToRefresh>
            </div>

            <div className={styles.footer}>
                <Menu />
            </div>
        </>
    )
}